<template>
	<div
		class="mp-page"
		id="main-page"
	>
		<!-- * oneday-header-white -->
		<div class="mp-header">
			<a
				href="#"
				class="mp-header-left"
				@click.prevent="backFn"
				><van-icon
					class="header-left-icon"
					name="arrow-left"
					color="#333"
					size="20"
				/>
			</a>
			<div class="mp-header-title">
				<van-icon
					name="location"
					color="#333"
					size="20"
				></van-icon>
				<slot name="title"></slot>
			</div>

			<span class="mp-header-right">
				<slot name="right"> </slot>
			</span>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'SearchView',
		data() {
			return {
				title: '一天·游',
			};
		},

		methods: {
			backFn() {
				this.$router.go(-1);
			},
		},
	};
</script>

<style scoped>
	.mp-page {
		background: #fff;
		width: 100%;
		overflow: hidden;
		flex-direction: column;
		box-sizing: border-box;
	}

	.mp-page::before {
		content: '';
	}

	.mp-header {
		position: fixed;
		z-index: 9;
		background: #fff;
		width: 98%;
		top: 0;
		left: 0;
		height: 1.2rem;
		box-sizing: border-box;
		border-radius: 20px;
		border: 1px solid #00bcd4;
		text-align: center;
		margin: 0.2rem 1%;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.mp-header-left {
		width: 0.4rem;
		padding: 0 0.2rem;
		font-size: 32px;
		text-decoration: none;
		color: black;
		line-height: 1.2rem;
		display: flex;
		align-items: center;
	}

	.mp-header-title {
		position: relative;
		height: 1rem;
		padding: 0 0.6rem 0 0.2rem;
		border-radius: 0.7rem;
		line-height: 0.6rem;
		margin: 0.14rem 0;
		flex: 1;
		display: flex;
		align-items: center;
		/* justify-content: ; */
		font-size: 0.3rem;
		color: #ccc;
		background-color: #f0f0f0;
		gap: 10px;
	}

	.mp-header-right {
		padding: 0 0.1rem;
		display: flex;
		align-items: center;
		color: black;
		font-size: 0.4rem;
		gap: 0.1rem;
		padding-right: 0.2rem;
	}

	.mp-header-right-text {
		font-size: 20px;
	}
</style>
